<template>
	<view class="content">
		<view class="listView">
			<view class="item MT80" @click="changePhone()">
				<text class="T1">手机号</text>
				<view class="">
					<text class="T2">{{ phone }}</text>
					<image style="width: 17rpx;height: 32rpx;margin-left: 24rpx;" src="../../../static/image/mine/setting/arrow_hui.png"></image>
				</view>
			</view>
			<view class="item MT80" @click="loginPwd()">
				<text class="T1">登录密码</text>
				<view class="">
					<image style="width: 17rpx;height: 32rpx;margin-left: 24rpx;" src="../../../static/image/mine/setting/arrow_hui.png"></image>
				</view>
			</view>
			<!-- <view class="item MT80" @click="toBindWechat()">
				<text class="T1">绑定微信</text>
				<view class="">
					<text class="toBind">{{ bindWechat }}</text>
					<image style="width: 17rpx;height: 32rpx;margin-left: 24rpx;" src="../../../static/image/mine/setting/arrow_hui.png"></image>
				</view>
			</view> -->
			<view class="item MT80" @click="clearStorage()">
				<text class="T1">清除缓存</text>
				<view class="">
					<text class="T2">{{ storageSize }}KB</text>
					<image style="width: 17rpx;height: 32rpx;margin-left: 24rpx;" src="../../../static/image/mine/setting/arrow_hui.png"></image>
				</view>
			</view>
			<view class="item MT80 MB80">
				<text class="T1">语音播报</text>
				<view class="switch"><switch :checked="isVoiceBroadcast" @change="switchChange" /></view>
			</view>
			<view class="item MT80" @click="toAboutUs()">
				<text class="T1">关于我们</text>
				<image style="width: 17rpx;height: 32rpx;margin-left: 24rpx;" src="../../../static/image/mine/setting/arrow_hui.png"></image>
			</view>
			<view class="item MT80 MB80" @click="versionUpdate()">
				<text class="T1">版本升级</text>
				<text class="T2">{{ version }}</text>
			</view>
			<!-- 。。。 -->
			<view class="item MT80 MB80" @click="OTA()">
				<text class="T1">固件版本</text>
				<text class="T2">{{ firmwareVersion }}</text>
			</view>
			
			<!-- <view v-if="hasCheckAuth" class="item MT80 MB80">
				<text class="T1">深度映射比</text>
				<input class="T2 inputStyle" type="number" v-model="mappingRatio" placeholder="请设置映射比" @blur="handleBlur"/>
			</view>
			<view v-if="hasCheckAuth" class="item MT80 MB80">
				<text class="T1">深度告警次数</text>
				<input class="T2 inputStyle" type="number" v-model="deepWarningTimes" placeholder="请设置深度告警次数" @blur="handleBlur_deepWarningTimes"/>
			</view> -->
		</view>
		<view class="exitBtn content" @click="exitLogin()"><text>退出登录</text></view>
		<!-- Enter exit popup -->
		<uni-popup ref="exitPopup" :mask-click="false" :safe-area="false" type="dialog">
			<view class="popup_exit">
				<image src="../../../static/image/iconPopup/icon_exit.png"></image>
				<view class="flex-c">
					<text class="popup1Content">退出登录</text>
					<text class="popup1Content">会删除所有数据</text>
				</view>
				<view class="popup_bottomView">
					<view class="popup_bottomViewitem content" style="background-color: #FFFFFF;border-radius:0 0 0 15px;" @click="cancelExit()">
						<text style="color: #333333;">取消</text>
					</view>
					<view class="popup_bottomViewitem content" style="background-color: #0659C7;border-radius:0 0 15px 0;" @click="enterExit()">
						<text style="color: #FFFFFF;">确定</text>
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
const nrfDfu = uni.requireNativePlugin('UUCoder-nRF-DFU');
const app = getApp();
import * as api from '@/api/login';
import util from '../../../utils/utils.js';
import checkUpdate from '@/uni_modules/uni-upgrade-center-app/utils/check-update';
import {mapState} from 'vuex'; //引入mapState
export default {
	data() {
		return {
			version: '',
			storageSize: 0, //缓存的大小
			bindWechat: '绑定微信',
			phone: '', //用户的手机号
			isVoiceBroadcast: null, //是否播报
			isClickPhone: false, //是否点击了更换手机号
			saveFilePath:'', //文件保存的路径
			hasCheckAuth: false,
			mappingRatio: '',
			deepWarningTimes: '',
		};
	},
	computed: {
		...mapState({
			firmwareVersion: function(state) {
				return state.firmwareVersion;
			},
		})
	},
	onLoad() {
		try {
			const res = uni.getStorageInfoSync();
			this.storageSize = res.currentSize;
			// 读取语音播报的缓存
			let isVoiceBroadcast = uni.getStorageSync('isVoiceBroadcast');
			if (isVoiceBroadcast != '' || isVoiceBroadcast != 'undefined') {
				this.isVoiceBroadcast = isVoiceBroadcast;
			}
		} catch (e) {
			// error
			console.log('catch', e);
		}
		this.mappingRatio = this.$store.state.mappingRatio
		this.deepWarningTimes = this.$store.state.deepWarningTimes
		this.version = plus.runtime.version;
		this.checkAuth()
	},
	onShow() {
		this.phone = util.HideTel(this.$store.state.userInfo.currentUser.phone);
	},
	onUnload() {
		let that = this;
		uni.$emit('updateUserInfo', that.isClickPhone);
	},
	methods: {
		// 检查用户是否有权限查看数据解读
		checkAuth() {
			let that = this;
			let data = {
				params: this.$store.state.userInfo.currentUser.phone
			};
			api.hasCheckAuth(data).then(function(res) {
				console.log('hasCheckAuth success', res);
				if (res.data.code === 2000) {
					that.hasCheckAuth = res.data.data.hasCheckAuth;
				}
			}).catch(function(err) {
				console.log('hasCheckAuth fail', err);
			})
		},
		handleBlur(e){
			console.log('修改映射比');
			this.$store.commit('SET_MappingRatio',this.mappingRatio)
		},
		handleBlur_deepWarningTimes(){
			this.$store.commit('SET_DeepWarningTimes',Number(this.deepWarningTimes))
		},
		// 更换手机号
		changePhone() {
			this.isClickPhone = true;
			uni.navigateTo({
				url: 'changePhone/changePhone'
			});
		},
		loginPwd(){
			uni.navigateTo({
				url: 'setPwd/setPwd'
			});
		},
		// 语音播报开关
		switchChange(e) {
			console.log(e.target.value);
			// 将结果放在缓存中
			uni.setStorageSync('isVoiceBroadcast', e.target.value);
		},
		// 清理缓存
		clearStorage() {
			this.storageSize = 0;
		},
		toAboutUs: function() {
			console.log('aboutUS');
			uni.navigateTo({
				url: 'aboutUs/aboutUs'
			});
		},
		// 版本升级
		versionUpdate() {
			// let ii = uni.getStorageInfoSync();
			// this.$toast('已是最新版本',{icon:'success'});
			checkUpdate(true);
		},
		// 退出登录 此操作不可逆 会删除缓存中得所有信息
		exitLogin() {
			// add enter
			this.$refs.exitPopup.open('center');
		},
		// 取消退出
		cancelExit() {
			this.$refs.exitPopup.close();
		},
		OTA() {
			if (!this.$store.state.isConnected) {
				this.$toast('请先连接头环', { icon: 'error' });
				return;
			}
			// this.checkVersion();
		},
		checkVersion() {
			let that = this;
			uni.request({
				url: 'https://xch.jseihc.com/public/platform/headband_dfu_packet/versionNumber.html',
				success(res) {
					console.log('version success:', res);
					if (res.statusCode === 200) {
						let compRes = that.$utils.compareVersion(res.data.version, that.$store.state.firmwareVersion);
						if (compRes == 1) {
							that.$dfu.downloadFile();
						} else if (compRes == 0) {
							that.$toast('已是最新版本!', { icon: 'success' });
						}
					}
				},
				fail(e) {
					console.log('version fail:', e);
				}
			});
		},
		// 确定退出 节流。。。
		enterExit() {
			this.$utils.throttle(() => {
				app.exitLogin();
			}, 1000);
		}
	}
};
</script>

<style>
page {
	background-color: #fafafa;
}
.content {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}
.MT80 {
	margin-top: 80rpx;
}

.MB80 {
	margin-bottom: 80rpx;
}

.listView {
	margin-top: 30rpx;
	width: 700rpx;
	height: auto;
	border-radius: 15px;
	background-color: #ffffff;
}

.item {
	margin-left: 32rpx;
	margin-right: 32rpx;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.T1 {
	font-size: 38rpx;
	font-family: Source Han Sans CN;
	font-weight: bold;
	color: #000000;
}
.T2 {
	font-size: 38rpx;
	font-family: Roboto;
	font-weight: normal;
	color: #666666;
}
.inputStyle {
	width: 200rpx;
	/* background-color: #0659c7; */
	text-align: right;
}
.toBind {
	font-size: 38rpx;
	font-family: Source Han Sans CN;
	font-weight: normal;
	color: #0659c7;
}
/* 退出按钮 */
.exitBtn {
	margin-top: 40rpx;
	margin-bottom: 50rpx;
	width: 700rpx;
	height: 120rpx;
	background-color: #ffffff;
	border-radius: 50px;
}
.exitBtn text {
	font-size: 38rpx;
	font-family: Source Han Sans CN;
	font-weight: normal;
	color: #0659c7;
}
/* popup */
.popup_exit {
	width: 620rpx;
	height: 750rpx;
	border-radius: 15px;
	background-color: white;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-between;
}
.popup_exit image {
	margin-top: 93rpx;
	width: 238rpx;
	height: 238rpx;
}
.popup_bottomView {
	width: 100%;
	height: 137rpx;
	border-top: 1rpx solid #e6e6e6;
	border-radius: 0 0 15px 15px;
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.popup_bottomViewitem {
	width: 50%;
	height: 100%;
	font-size: 44rpx;
	font-family: Source Han Sans CN;
	font-weight: normal;
}
.popup1Content {
	margin-top: 20rpx;
	font-size: 52rpx;
	font-family: Source Han Sans CN;
	font-weight: normal;
	color: #333333;
}
.flex-c {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}
</style>
